<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!--就诊人信息卡片-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>选择就诊人</span>
          <el-button type="primary" size="default" :icon="User" @click="goAddUser" >添加就诊人</el-button>
        </div>
      </template>
      <!--就诊人信息-->
      <div class="user" >
        <Visitor
            class="item"
            v-for="(user,index) in userArr" :key="user.id" v-on:click="changeIndex(index)"
            :user="user"
            :index="index"
            :currentIndex="currentIndex"
             >
        </Visitor>
      </div>
    </el-card>
    <!--医生信息卡片-->
    <el-card class="box-card">
      <!--卡片头部-->
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <!--卡片身体-->
      <el-descriptions class="margin-top" :column="2" border >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期</div>
          </template>
          {{docInfo.workDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院</div>
          </template>
          {{docInfo.param?.hosname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室</div>
          </template>
          {{docInfo.param?.depname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名</div>
          </template>
          {{docInfo.docname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称</div>
          </template>
          {{docInfo.title}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长</div>
          </template>
          {{docInfo.skill}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务费</div>
          </template>
          <span style="color: red">{{docInfo.amount}}元</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!--确定挂号按钮-->
    <div class="btn">
      <el-button type="primary" size="default" :disabled="currentIndex==-1?true:false" v-on:click="submitOrder" >确认挂号</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted,ref} from "vue";
import {User} from "@element-plus/icons-vue";
//获取就诊人信息的接口请求
import {reqDoctorInfo, reqGetUser} from "@/api/hospital";
import {UserResponseData, UserArr, DoctorInfoData} from "@/api/hospital/type.ts";
import {SubmitOrder} from "@/api/user/type.ts";
import {reqSubmitOrder} from "@/api/user";
import {ElMessage} from "element-plus";
import path from "path";

//获取路由对象
let $route = useRoute();
//获取录取对象
let $router = useRouter();
//存储就诊人信息
let userArr = ref<UserArr>([]);
//存存储医生的信息
let docInfo = ref<any>({});
//存储用户选择的就诊人索引
let currentIndex = ref<number>(-1);

// 获取就诊人信息
const fetchUserData = async () => {
  //能获取到的前提是已经在尚硅谷(http://syt.atguigu.cn/patient)添加了就诊人,并且账号(手机号)一致
  let result:UserResponseData = await reqGetUser();
  if (result.code == 200) {
    //存储就诊人信息
    userArr.value = result.data;
  }
};
//获取医生的信息
const fetchUserInfo = async () => {
  let result:DoctorInfoData = await reqDoctorInfo($route.query.docId as string);
  if (result.code == 200) {
    docInfo.value = result.data;
  }
};
//点击就诊人子组件的回调
const changeIndex = (index: number) => {
  //存储当前用户选中的就诊人信息索引值
  currentIndex.value = index;
};
//确定挂号按钮
const submitOrder = async () => {
  //医院编号
  let hoscode = docInfo.value.hoscode;
  //医生id
  let scheduleId = docInfo.value.id;
  //就诊人id
  let patientId = userArr.value[currentIndex.value].id;
  let result: SubmitOrder = await reqSubmitOrder(hoscode, scheduleId, patientId);
  //订单提交成功
  if (result.code == 200) {
    $router.push({path:"/user/order",query:{orderId: result.data}});
  } else {//提交失败
    ElMessage({
      type:"error",
      message: result.message,
    });
  }
};
// 添加就诊人
const goAddUser = () => {
  $router.push({path: "/user/patient",query:{type:"add"}})
}

//组件挂载完毕获取数据
onMounted(()=>{
  //获取就诊人信息
  fetchUserData();
  //获取医生的信息
  fetchUserInfo();
});

</script>

<style scoped lang="scss">
.container {
  .tip {
    font-weight: 900;
    color: #7f7f7f;
    font-size: 20px;
  }
  .box-card {
    margin: 20px 0px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .user {
      display: flex;
      flex-wrap: wrap;//换行
      .item {
        width: 32%;
        margin: 5px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0px;
  }
}
</style>